<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
  <div class="form-group" [class.has-error]="formModel.hasError('minlength','title')">
    <label for="productTitle" class="control-label">商品名称 : </label>
    <input formControlName="title" id="productTitle" type="text" class="form-control" placeholder="商品名称">
    <span class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">
      请至少输入三个字符
    </span>
  </div>
  <div class="form-group" [class.has-error]="formModel.hasError('positiveNumber','price')">
    <label for="productPrice" class="control-label">商品价格 : </label>
    <input formControlName="price" id="productPrice" type="number" class="form-control" placeholder="商品价格">
    <span class="help-block" [class.hidden]="!formModel.hasError('positiveNumber','price')">
      请输入正数
    </span>
  </div>
  <div class="form-group">
    <label for="productCategory" class="control-label">商品类别 : </label>
    <select formControlName="category" id="productCategory" class="form-control">
      <option value="-1">全部分类</option>
      <option *ngFor="let category of categories" [value]="category">{{category}}</option>
    </select>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary btn-block" value="搜索">
  </div>
</form>